import React, { Component } from 'react';
import './topics.scss';
import { Link } from 'react-router-dom';

class Com extends Component {
    constructor (props) {
        super(props);
        this.state = {}
        
    }

    render () {
        return( 
            <div className="topicConter">
                <div className="topicCentent">
                    <div className="header">
                        <div className="left">
                            <Link to="/user"><div className="left-Img">
                                <img src="https://user-gold-cdn.xitu.io/2017/7/13/bfe29d9a6c356c6f60c2d380c99dc76b?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/>
                            </div></Link>
                            <Link to="/user"><div className="left-Title">gongph</div></Link>
                            <div className="left-xinxi">招App图形开发工程师 @ wechat: migao117842 · 2小时前</div>
                        
                            <div className="topicInfo">
                                <div className="Info-header">
                                    <Link to="/user"><div className="Info-left">
                                    <img src="https://user-gold-cdn.xitu.io/2017/7/13/bfe29d9a6c356c6f60c2d380c99dc76b?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/></div></Link>
                                    <div className="Info-right">
                                        <Link to="/user"><span>gongph</span></Link>
                                        <em>招App图形开发工程师 @ wechat: migao117842</em>
                                    </div>
                                </div>
                                <div className="Info-footer">
                                    <div className="Info-one">
                                        <b>83</b>
                                        <i>关注</i>
                                    </div>
                                    <div className="Info-two">
                                        <b>386</b>
                                        <i>关注者</i>
                                    </div>
                                    <div className="Info-there">
                                        <Link to="/">关注</Link>
                                    </div>
                                </div>
                            </div>
                        
                        </div>
                        <div className="right">
                            <Link to="/">关注</Link>
                        </div>
                    </div>
                    <div className="content">
                        Rust Cargo.toml配置与条件编译小技巧。
                        
                    </div>
                    <div className="images">
                        <img src="https://user-gold-cdn.xitu.io/2019/1/3/1681374d42b29be9?imageView2/1/w/460/h/316/q/85/format/jpg/interlace/1" alt=""/>
                    </div>
                    <p><Link to="/topic" title="日拱一卒，功不唐捐。
                        一起来分享下你今天听到的有意思的事情，或者学习的冷知识。">今天学到了</Link>
                    </p>
                    <div className="footer">
                        <span>
                            <b><img src="http://ku.90sjimg.com/element_origin_min_pic/01/39/74/72573cd2114ba9b.jpg" alt=""/></b>
                            <em>24</em>
                        </span>
                        <span>
                            <b><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547101271619&di=42730c2dcc10b15c79b659f2c1377f5e&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F64%2F31%2F5957785da26bc_610.jpg" alt=""/></b>
                            <em>1</em>
                        </span>
                        <span>
                            <b><img src="http://bpic.588ku.com/element_origin_min_pic/01/42/50/70573d7de81d0e6.jpg" alt=""/></b>
                            <em>分享</em>
                        </span>
                    </div>
                </div>
                
                <div className="topicCentent">
                    <div className="header">
                        <div className="left">
                            <Link to="/user"><div className="left-Img"><img src="https://leancloud-gold-cdn.xitu.io/4df447de5c3e55917613.jpg?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/></div></Link>
                            <Link to="/user"><div className="left-Title">j_knight</div></Link>
                            <div className="left-xinxi">iOS @ 爱奇艺</div>

                            <div className="topicInfo">
                                <div className="Info-header">
                                    <Link to="/user"><div className="Info-left">
                                        <img src="https://leancloud-gold-cdn.xitu.io/4df447de5c3e55917613.jpg?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/>
                                    </div></Link>
                                    <div className="Info-right">
                                        <Link to="/user"><span>j_knight</span></Link>
                                        <em>iOS @ 爱奇艺</em>
                                    </div>
                                </div>
                                <div className="Info-footer">
                                    <div className="Info-one">
                                        <b>83</b>
                                        <i>关注</i>
                                    </div>
                                    <div className="Info-two">
                                        <b>386</b>
                                        <i>关注者</i>
                                    </div>
                                    <div className="Info-there">
                                        <Link to="/">关注</Link>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div className="right">
                            <Link to="/">关注</Link>
                        </div>
                    </div>
                    <div className="content">
                    最近有位朋友问我为什么做 code review 很重要。 至少大多数硅谷科技公司都会对每一个变更进行 code review，以确保至少有两个人看过该变更。 在我之前的工...
                    </div>
                    <div className="images">
                        <img src="https://user-gold-cdn.xitu.io/2019/1/2/1680c55f785b7e7c?imageView2/1/w/460/h/316/q/85/format/jpg/interlace/1" alt=""/>
                        <img src="https://user-gold-cdn.xitu.io/2019/1/2/1680d1557846e9da?imageView2/1/w/260/h/260/q/85/format/jpg/interlace/1" alt=""/>
                    </div>
                    <p><Link to="/topic" title="日拱一卒，功不唐捐。
                        一起来分享下你今天听到的有意思的事情，或者学习的冷知识。">今天学到了</Link>
                    </p>
                    <div className="footer">
                        <span>
                            <b><img src="http://ku.90sjimg.com/element_origin_min_pic/01/39/74/72573cd2114ba9b.jpg" alt=""/></b>
                            <em>24</em>
                        </span>
                        <span>
                            <b><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547101271619&di=42730c2dcc10b15c79b659f2c1377f5e&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F64%2F31%2F5957785da26bc_610.jpg" alt=""/></b>
                            <em>1</em>
                        </span>
                        <span>
                            <b><img src="http://bpic.588ku.com/element_origin_min_pic/01/42/50/70573d7de81d0e6.jpg" alt=""/></b>
                            <em>分享</em>
                        </span>
                    </div>
                </div>
        
                <div className="topicCentent">
                    <div className="header">
                        <div className="left">
                            <Link to="/user"><div className="left-Img"><img src="https://user-gold-cdn.xitu.io/2018/1/7/160cf1a8d473fc00?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/></div></Link>
                            <Link to="/user"><div className="left-Title">白小明</div></Link>
                            <div className="left-xinxi">前端开发者</div>

                            <div className="topicInfo">
                                <div className="Info-header">
                                    <Link to="/user"><div className="Info-left">
                                        <img src="https://user-gold-cdn.xitu.io/2018/1/7/160cf1a8d473fc00?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/>
                                    </div></Link>
                                    <div className="Info-right">
                                        <Link to="/user"><span>白小明</span></Link>
                                        <em>前端开发者</em>
                                    </div>
                                </div>
                                <div className="Info-footer">
                                    <div className="Info-one">
                                        <b>83</b>
                                        <i>关注</i>
                                    </div>
                                    <div className="Info-two">
                                        <b>386</b>
                                        <i>关注者</i>
                                    </div>
                                    <div className="Info-there">
                                        <Link to="/">关注</Link>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div className="right">
                            <Link to="/">关注</Link>
                        </div>
                    </div>
                    <div className="content">
                    某些元素会由于自身的宽度问题导致水平滚动栏的出现。要找出这这个问题原因，最简单的方法就是使用 CSS 的 outline 属性。Addy OSmani 分享了一段脚本，它可以直接放到浏览器的 console 中执行，以此 outline 出页面的每个元素。
                    </div>
                    <div className="images">
                        <img src="https://user-gold-cdn.xitu.io/2019/1/3/168140e27b47a984?imageView2/1/w/316/h/356/q/85/format/jpg/interlace/1" alt=""/>
                        
                    </div>
                    <p><Link to="/topic" title="日拱一卒，功不唐捐。
                        一起来分享下你今天听到的有意思的事情，或者学习的冷知识。">今天学到了</Link>
                    </p>
                    <div className="footer">
                        <span>
                            <b><img src="http://ku.90sjimg.com/element_origin_min_pic/01/39/74/72573cd2114ba9b.jpg" alt=""/></b>
                            <em>24</em>
                        </span>
                        <span>
                            <b><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547101271619&di=42730c2dcc10b15c79b659f2c1377f5e&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F64%2F31%2F5957785da26bc_610.jpg" alt=""/></b>
                            <em>1</em>
                        </span>
                        <span>
                            <b><img src="http://bpic.588ku.com/element_origin_min_pic/01/42/50/70573d7de81d0e6.jpg" alt=""/></b>
                            <em>分享</em>
                        </span>
                    </div>
                </div>

                <div className="topicCentent">
                            <div className="header">
                                <div className="left">
                                    <Link to="/user"><div className="left-Img"><img src="https://user-gold-cdn.xitu.io/2017/7/13/bfe29d9a6c356c6f60c2d380c99dc76b?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/></div></Link>
                                    <Link to="/user"><div className="left-Title">jothy</div></Link>
                                    <div className="left-xinxi">补锅匠 @ 掘金</div>

                                    <div className="topicInfo">
                                        <div className="Info-header">
                                            <Link to="/user"><div className="Info-left">
                                                <img src="https://user-gold-cdn.xitu.io/2017/7/13/bfe29d9a6c356c6f60c2d380c99dc76b?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""/>
                                            </div></Link>
                                            <div className="Info-right">
                                                <Link to="/user"><span>jothy</span></Link>
                                                <em>补锅匠 @ 掘金</em>
                                            </div>
                                        </div>
                                        <div className="Info-footer">
                                            <div className="Info-one">
                                                <b>83</b>
                                                <i>关注</i>
                                            </div>
                                            <div className="Info-two">
                                                <b>386</b>
                                                <i>关注者</i>
                                            </div>
                                            <div className="Info-there">
                                                <Link to="/topic/popular">关注</Link>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div className="right">
                                    <Link to="/">关注</Link>
                                </div>
                            </div>
                            <div className="content">
                            前不久还是10%，20%，现在直接升级一锅端了？
                            </div>
                            <div className="images">
                                <img src="https://user-gold-cdn.xitu.io/2019/1/3/16811f252d00c7d0?imageView2/1/w/460/h/408/q/85/format/jpg/interlace/1" alt=""/>
                                
                            </div>
                            <p><Link to="/topic" title="日拱一卒，功不唐捐。
                                一起来分享下你今天听到的有意思的事情，或者学习的冷知识。">今天学到了</Link>
                            </p>
                            <div className="footer">
                                <span>
                                    <b><img src="http://ku.90sjimg.com/element_origin_min_pic/01/39/74/72573cd2114ba9b.jpg" alt=""/></b>
                                    <em>24</em>
                                </span>
                                <span>
                                    <b><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547101271619&di=42730c2dcc10b15c79b659f2c1377f5e&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F64%2F31%2F5957785da26bc_610.jpg" alt=""/></b>
                                    <em>1</em>
                                </span>
                                <span>
                                    <b><img src="http://bpic.588ku.com/element_origin_min_pic/01/42/50/70573d7de81d0e6.jpg" alt=""/></b>
                                    <em>分享</em>
                                </span>
                            </div>
                        </div>
            </div>
                   
        )
    }
}
export default Com;